<template>
    <div class="main-page">
        <AmplifierPanel />
        <div class="effects-panel-container">
            <EffectsPanel />
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue';
import AmplifierPanel from './AmplifierPanel.vue';
import EffectsPanel from './EffectsPanel.vue';

export default defineComponent({
    name: 'Vstomp',
    components: {
        AmplifierPanel,
        EffectsPanel
    }
});
</script>

<style scoped>
.main-page {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.effects-panel-container {
    position: absolute;
    width: calc(100% + 40px);
    /* Increased width to compensate for left shift */
    bottom: -20px;
    left: -20px;
    /* Adjust this value to control left shift distance */
}
</style>
